<template>
  <div>
    <p>阵列立方体和相机适配体验</p>
    <div class="three_box"></div>
  </div>
</template>

<script setup>
import * as THREE from "three";
import { nextTick } from "vue";
// 引入threejs 的扩展库  相机轨道控件
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

nextTick(() => {
  const scene = new THREE.Scene(); //场景
  const boxGeo = new THREE.BoxGeometry(50, 50, 50); //形状
  const material = new THREE.MeshLambertMaterial({
    //材质
    color: 0x00ffff,
    transparent: true,
    opacity: 0.5,
  });
  
  for (let j = 0; j < 10; j++) {
    for (let index = 0; index < 10; index++) {
      const mesh = new THREE.Mesh(boxGeo, material); //对象
      mesh.position.set(index * 100, 0, j * 100); //布局
      scene.add(mesh);
    //   console.log(mesh, "物体");
    }
  }
  const xyz = new THREE.AxesHelper(100); //坐标轴
  scene.add(xyz);
  
  const Dom = document.querySelector(".three_box");
//   console.log(Dom,"坐标");
  let domWidth = Dom.offsetWidth;
  let domHeight = Dom.offsetHeight;
  const camera = new THREE.PerspectiveCamera( //相机
    40,
    domWidth / domHeight,
    0.1,
    30000
  );
  camera.position.set(1000, 1000, 1000);
  camera.lookAt(500,0,500)
  scene.add(camera);
  const amlight = new THREE.AmbientLight(0xffffff, 1); //自然光
  scene.add(amlight);
  const renderer = new THREE.WebGLRenderer(); //渲染器
  renderer.setSize(domWidth, domHeight);
  renderer.render(scene, camera);
//   console.log("执行了");
  
  Dom.appendChild(renderer.domElement);
  //   相机控件
  const cintrols = new OrbitControls(camera, renderer.domElement);
 cintrols.target.set(500,0,500)
  cintrols.addEventListener("change", function () {
    renderer.render(scene, camera);
  });
});
</script>

<style scoped>
.three_box {
  width: 80vw;
  height: 70vh;
  position: relative;
}
</style>